<template>
  <!-- <div>
  <h1>你好,我是中国地图组件...</h1>
  </div> -->
  <div class="echarts">
    <div :style="{ height: '400px', width: '50vw' }" ref="myEchart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import "../../../../node_modules/echarts/map/js/china.js";
import { selectAllDataMap } from "../../../network/index.js";
export default {
  name: "echarts",
  //   props: ["userJson"],
  data() {
    return {
      chart: null,
      drawing: {
        // 进行相关配置
        // 背景颜色  #282C34  #FFFFFF
        backgroundColor: "#333333",
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "yellow", "lightskyblue"],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: "rgba(0,0,0,0.4)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 对应上方配置
          },
          {
            name: "当前问卷填写次数", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            // 在这里动态添加数据 需要先清空然后遍历赋值
            data: [],
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    // 挂载的时候,就进行这个方法
    this.chinaConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      // 向数据库发送请求
      selectAllDataMap({
        formId: localStorage.getItem("id"),
      }).then((res) => {
        if (res.data != null) {
          // 后端有问题,返回的每次都是总的数据,不是当前问卷的数据
          // console.log(localStorage.getItem("id"));
          this.drawing.series[1].data = [];
          // console.log(this.drawing.series[1].data)
          this.drawing.series[1].data = res.data;
          // console.log(this.drawing.series[1].data);
          // 在这里进行绘制
          myChart.setOption(this.drawing);
          // console.log(this.drawing.series[1].data);
        }
      });
    },
  },
};
</script>
<style scoped>
</style>